{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}{/block}
{block name="appDiv"}
<lay-container fluid="true" class="organization-box">
    <div style="display: flex; background-color: #fff;">
        <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
            <!-- tree -->
            <div v-show="!isFold">
                <lay-button type="normal" size="sm" @click="toAdd">
                    <lay-icon type="layui-icon-addition"></lay-icon>
                    新建
                </lay-button>
                <lay-button type="warm" size="sm" @click="toEdit">
                    <lay-icon type="layui-icon-edit"></lay-icon>
                    修改
                </lay-button>
                <lay-button type="danger" size="sm" @click="toDelete">
                    <lay-icon type="layui-icon-delete"></lay-icon>
                    删除
                </lay-button>
            </div>

            <lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selected-key="selectedKey"
                      :show-line="showLine" :expand-keys="[1, 3, 4]" @node-click="handleClick">
                <template #title="{ data }">
            <span :class="selectedKey == data.id ? 'isChecked' : ''">
              {{ data.title }} {{ data.id }}
            </span>
                </template>
            </lay-tree>
            <div class="isFold" @click="isFold = !isFold">
                &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
                <lay-icon v-else class="layui-icon-right"></lay-icon>
            </div>
        </div>
        <div style="flex: 1; padding: 10px; over-flow: auto">
            <lay-card>
                <lay-form>
                    <lay-row>
                        <lay-col :md="5">
                            <lay-form-item label="用户账号" label-width="80">
                                <lay-input v-model="searchQuery.userAccount" placeholder="请输入"
                                           size="sm" :allow-clear="true" style="width: 98%"></lay-input>
                            </lay-form-item>
                        </lay-col>
                        <lay-col :md="5">
                            <lay-form-item label="用户名" label-width="80">
                                <lay-input v-model="searchQuery.userName" placeholder="请输入" size="sm"
                                        :allow-clear="true" style="width: 98%"></lay-input>
                            </lay-form-item>
                        </lay-col>
                        <lay-col :md="5">
                            <lay-form-item label="性别" label-width="80">
                                <lay-select class="search-input" size="sm" v-model="searchQuery.sex" :allow-clear="true" placeholder="请选择">
                                    <lay-select-option value="man" label="男"></lay-select-option>
                                    <lay-select-option value="woman" label="女"></lay-select-option>
                                </lay-select>
                            </lay-form-item>
                        </lay-col>
                        <lay-col :md="5">
                            <lay-form-item label-width="20">
                                <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                                    查询
                                </lay-button>
                                <lay-button size="sm" @click="toReset"> 重置</lay-button>
                            </lay-form-item>
                        </lay-col>
                    </lay-row>
                </lay-form>
            </lay-card>
            <lay-table :height="tableHeight" class="table-style" :page="page" :columns="columns"
                    :loading="loading" :default-toolbar="true" :data-source="dataSource"
                    v-model:selected-keys="selectedKeys" @change="change" @sort-change="sortChange">
                <template #status="{ row }">
                    <lay-switch :model-value="row.status" @change="changeStatus($event, row)"></lay-switch>
                </template>
                <template #role="{ row }">
                    <lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
                </template>

                <template v-slot:toolbar>
                    <lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">新增</lay-button>
                    <lay-button size="sm" @click="toRemove">删除</lay-button>
                </template>
                <template v-slot:operator="{ row }">
                    <lay-button size="xs" border="green" border-style="dashed" @click="changeVisible11('编辑', row)">编辑</lay-button>
                    <lay-popconfirm content="确定要删除此用户吗?" @confirm="confirm" @cancel="cancel">
                        <lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
                    </lay-popconfirm>
                </template>
            </lay-table>
        </div>
    </div>
    <lay-layer v-model="visible11" :title="title" :area="['500px', '450px']">
        <div style="padding: 20px">
            <lay-form :model="model11" ref="layFormRef11" required>
                <lay-form-item label="用户账号" prop="account">
                    <lay-input v-model="model11.account"></lay-input>
                </lay-form-item>
                <lay-form-item label="用户名" prop="name">
                    <lay-input v-model="model11.name"></lay-input>
                </lay-form-item>
                <lay-form-item label="性别" prop="sex">
                    <lay-select v-model="model11.sex" style="width: 100%">
                        <lay-select-option value="男" label="男"></lay-select-option>
                        <lay-select-option value="女" label="女"></lay-select-option>
                    </lay-select>
                </lay-form-item>
                <lay-form-item label="角色" prop="role">
                    <lay-input v-model="model11.role"></lay-input>
                </lay-form-item>
                <lay-form-item label="状态" prop="status">
                    <lay-switch :model-value="model11.status"></lay-switch>
                </lay-form-item>
            </lay-form>
            <div style="width: 100%; text-align: center">
                <lay-button size="sm" type="primary" @click="toSubmit"
                >保存
                </lay-button
                >
                <lay-button size="sm" @click="toCancel">取消</lay-button>
            </div>
        </div>
    </lay-layer>

    <lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
        <div style="padding: 20px">
            <lay-form :model="model22" ref="layFormRef11" required>
                <lay-row>
                    <lay-col md="12">
                        <lay-form-item label="上级机构" prop="organization">
                            <lay-select v-model="model22.organization" style="width: 100%">
                                <lay-select-option value="1" label="研发部">
                                </lay-select-option>
                                <lay-select-option value="2" label="测试部">
                                </lay-select-option>
                                <lay-select-option value="3" label="设计部">
                                </lay-select-option>
                                <lay-select-option value="4" label="市场部">
                                </lay-select-option>
                                <lay-select-option value="5" label="运维部">
                                </lay-select-option>
                            </lay-select>
                        </lay-form-item>
                        <lay-form-item label="机构名称" prop="name">
                            <lay-input v-model="model22.name"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="机构全称" prop="fullName">
                            <lay-input v-model="model22.fullName"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="机构代码" prop="code">
                            <lay-input v-model="model22.code"></lay-input>
                        </lay-form-item>
                    </lay-col>
                    <lay-col md="12">
                        <lay-form-item label="机构类型" prop="type">
                            <lay-select v-model="model22.type" style="width: 100%">
                                <lay-select-option value="1" label="公司"></lay-select-option>
                                <lay-select-option value="2" label="子公司">
                                </lay-select-option>
                                <lay-select-option value="3" label="部门"></lay-select-option>
                                <lay-select-option value="4" label="小组"></lay-select-option>
                            </lay-select>
                        </lay-form-item>
                        <lay-form-item label="排序号" prop="sort">
                            <lay-input-number style="width: 100%" v-model="model22.sort" position="right"></lay-input-number>
                        </lay-form-item>
                        <lay-form-item label="备注" prop="remark">
                            <lay-textarea placeholder="请输入备注" v-model="model22.remark" :rows="4"></lay-textarea>
                        </lay-form-item>
                    </lay-col>
                </lay-row>
            </lay-form>
            <div style="width: 100%; text-align: center">
                <lay-button size="sm" type="primary" @click="toSubmit"
                >保存
                </lay-button
                >
                <lay-button size="sm" @click="toCancel">取消</lay-button>
            </div>
        </div>
    </lay-layer>
</lay-container>
{/block}
{block name="afterDiv"}
<script setup lang="ts">

    const data = ref([
        {
            title: 'xxxx公司',
            id: 1,
            checked: true,
            children: [
                {
                    title: '研发部',
                    id: 2,
                    children: [
                        {
                            title: '研发一部',
                            id: 3
                        },
                        {
                            title: '研发二部',
                            id: 4
                        },
                        {
                            title: '研发三部',
                            id: 5
                        }
                    ]
                },
                {
                    title: '测试部',
                    id: 6,
                    children: [
                        {
                            title: '测试一部',
                            id: 7,
                            disabled: true
                        },
                        {
                            title: '测试二部',
                            id: 8
                        }
                    ]
                },
                {
                    title: '设计部',
                    id: 9
                },
                {
                    title: '市场部',
                    id: 10
                }
            ]
        }
    ])
    const showLine = ref(false)
    const selectedKey = ref('')
    const selectedNode = ref({
        id: 0,
        title: ''
    })
    const isFold = ref(false)
    const searchQuery = ref({
        userAccount: '',
        userName: '',
        sex: ''
    })

    function toReset() {
        searchQuery.value = {
            userAccount: '',
            userName: '',
            sex: ''
        }
    }

    function handleClick(node) {
        selectedNode.value = JSON.parse(JSON.stringify(node))
        page.current = selectedNode.value.id
        change(page)
    }

    function toAdd() {
        visible22.value = true
    }

    function toEdit() {
        model22.value = {
            organization: '1',
            name: '研发部',
            fullName: 'xxxx公司-研发部',
            code: '001',
            type: '1',
            sort: 1,
            remark: '备注'
        }
        visible22.value = true
    }

    function toDelete() {
        if (selectedKey.value === '') {
            layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
                icon: 3,
                time: 2000
            })
            return
        }
        layer.confirm(
            '您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
            {
                title: '提示',
                btn: [
                    {
                        text: '确定',
                        callback: (id) => {
                            layer.msg('您已成功删除')
                            layer.close(id)
                        }
                    },
                    {
                        text: '取消',
                        callback: (id) => {
                            layer.msg('您已取消操作')
                            layer.close(id)
                        }
                    }
                ]
            }
        )
    }

    function toSearch() {
        page.current = 1
        change(page)
    }

    const loading = ref(false)
    const selectedKeys = ref()
    const page = reactive({current: 1, limit: 10, total: 100})
    const columns = ref([
        {title: '选项', width: '55px', type: 'checkbox', fixed: 'left'},
        {title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'id'},
        {title: '用户账号', width: '80px', key: 'account', sort: 'account'},
        {title: '用户名', width: '80px', key: 'name', sort: 'name'},
        {title: '性别', width: '80px', key: 'sex', sort: 'sex'},
        {title: '角色', width: '120px', key: 'role', customSlot: 'role'},
        {
            title: '创建时间',
            width: '120px',
            key: 'joinTime'
        },
        {title: '状态', width: '120px', key: 'status', sort: 'status'},

        {
            title: '操作',
            width: '150px',
            customSlot: 'operator',
            key: 'operator',
            fixed: 'right'
        }
    ])
    const change = (page) => {
        loading.value = true
        setTimeout(() => {
            dataSource.value = loadDataSource(page.current, page.limit)
            loading.value = false
        }, 1000)
    }
    const sortChange = (key, sort) => {
        layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
    }
    const dataSource = ref([
        {
            id: '1',
            name: '管理员',
            sex: '男',
            role: '管理员',
            account: 'admin',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '2',
            name: '张三2',
            sex: '男',
            role: '普通用户',
            account: '用户2',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '3',
            name: '李四3',
            sex: '男',
            role: '普通用户',
            account: '用户3',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '4',
            name: '用户4',
            sex: '男',
            role: '普通用户',
            account: '用户4',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '5',
            name: '王五5',
            sex: '男',
            role: '普通用户',
            account: '用户5',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '6',
            name: '赵六6',
            sex: '男',
            role: '普通用户',
            account: '用户6',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '7',
            name: '黄齐7',
            sex: '男',
            role: '普通用户',
            account: '用户7',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '8',
            name: '用户8',
            sex: '男',
            role: '普通用户',
            account: '用户8',
            joinTime: '2022-02-09 18:34:56',
            status: true
        },
        {
            id: '9',
            name: '游客9',
            sex: '男',
            role: '游客',
            account: '游客9',
            joinTime: '用户22-02-09 18:34:56',
            status: true
        },
        {
            id: '10',
            name: '用户10',
            sex: '女',
            role: '普通用户',
            account: 'user10',
            joinTime: '2022-02-09 18:34:56 18:34:56',
            status: true
        }
    ])
    const changeStatus = (isChecked, row) => {
        dataSource.value.forEach((item) => {
            if (item.id === row.id) {
                layer.msg('Success', {icon: 1}, () => {
                    item.status = isChecked
                })
            }
        })
    }
    const remove = () => {
        layer.msg(selectedKeys.value, {area: '50%'})
    }
    const loadDataSource = (page, pageSize) => {
        var response = []
        var startIndex = (page - 1) * pageSize + 1
        var endIndex = page * pageSize
        for (var i = startIndex; i <= endIndex; i++) {
            response.push({
                id: `${i}`,
                account: `user${i}`,
                sex: '男',
                name: `用户${i}`,
                joinTime: '2022-02-09 18:34:56',
                role: '普通用户',
                status: true
            })
        }
        return response
    }
    const model11 = ref({
        name: '',
        role: '',
        sex: '',
        status: '',
        account: ''
    })
    const layFormRef11 = ref()
    const visible11 = ref(false)
    const title = ref('新增')
    const changeVisible11 = (text, row) => {
        title.value = text
        if (row != null) {
            model11.value = JSON.parse(JSON.stringify(row))
        } else {
            model11.value = {
                name: '',
                role: '',
                sex: '',
                status: '',
                account: ''
            }
        }
        visible11.value = !visible11.value
    }

    const submit11 = function () {
        layFormRef11.value.validate((isValidate, model, errors) => {
            layer.open({
                type: 1,
                title: '表单提交结果',
                content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
                    model
                )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
                shade: false,
                isHtmlFragment: true,
                btn: [
                    {
                        text: '确认',
                        callback(index) {
                            layer.close(index)
                        }
                    }
                ],
                area: '500px'
            })
        })
    }

    // 清除校验
    const clearValidate11 = function () {
        layFormRef11.value.clearValidate()
    }
    // 重置表单
    const reset11 = function () {
        layFormRef11.value.reset()
    }

    function toRemove() {
        if (selectedKeys.value.length === 0) {
            layer.msg('您未选择数据，请先选择要删除的数据', {icon: 3, time: 2000})
            return
        }
        layer.confirm('您将删除所有选中的数据？', {
            title: '提示',
            btn: [
                {
                    text: '确定',
                    callback: (id) => {
                        layer.msg('您已成功删除')
                        layer.close(id)
                    }
                },
                {
                    text: '取消',
                    callback: (id) => {
                        layer.msg('您已取消操作')
                        layer.close(id)
                    }
                }
            ]
        })
    }

    function toSubmit() {
        layer.msg('保存成功！', {icon: 1, time: 1000})
        visible11.value = false
        visible22.value = false
    }

    function toCancel() {
        visible11.value = false
        visible22.value = false
    }

    function confirm() {
        layer.msg('您已成功删除')
    }

    function cancel() {
        layer.msg('您已取消操作')
    }

    const model22 = ref({
        organization: '',
        name: '',
        fullName: '',
        code: '',
        type: '',
        sort: 0,
        remark: ''
    })
    const layFormRef22 = ref()
    const visible22 = ref(false)
    const title22 = ref('新建')
    const tableHeight=(pageHeight-153)+'px';
</script>
<script>
    vue_data = {};
    vue_setup = {
        data,showLine,selectedKey,selectedNode,isFold,searchQuery,toReset,handleClick,toAdd,toEdit,
        toDelete,toSearch,loading,selectedKeys,page,columns,change,sortChange,dataSource,changeStatus,
        remove,loadDataSource,model11,layFormRef11,visible11,title,
        changeVisible11 ,submit11,clearValidate11,reset11,toRemove,toSubmit,toCancel,confirm,cancel,model22,layFormRef22,
        visible22,title22,tableHeight
    }
    methods = {
        onLoad() {
            console.log('页面初始化请求数据并加载')
        },
    };
    watch = {};
    computed = {};
    mounted = function () {
        this.onLoad();
    };
    updated = function () {
    };
    <!--只需要专注于data,method等函数就行-->
</script>
<style scoped>
    .organization-box {
        padding:  10px 15px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .left-tree {
        display: inline-block;
        padding: 20px 15px 0 5px;
        border-right: 1px solid #e6e6e6;
        box-sizing: border-box;
        position: relative;
    }

    /* todo layui-tree-entry 设置无效 */
    .layui-tree-entry {
        position: relative;
        padding: 10px 0;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
    }

    .isFold {
        position: absolute;
        top: 36%;
        right: -10px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        border-radius: 13px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        cursor: pointer;
    }

    .search-input {
        display: inline-block;
        width: 98%;
        margin-right: 10px;
    }

    .table-style {
        margin-top: 10px;
    }

    .isChecked {
        display: inline-block;
        background-color: #e8f1ff;
        color: red;
    }
</style>


{/block}
{block name="constApp"}{__block__}{/block}
{block name="plugins"}{/block}
{block name="mountApp"}{__block__}{/block}